<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrapValidator.min.css">
<link href="http://blog.java1234.com/favicon.ico" rel="SHORTCUT ICON">
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/bootstrap.min.js"></script>
<title>分页列表!!!</title>
<style type="text/css">
 .content tr,td,th{
   text-align: center;
 }
</style>
<script type="text/javascript">
   function del(id) {
	  if(confirm("确认删除吗?")){
		  $.ajax({
              url: "${pageContext.request.contextPath}/test/delete.shtml",
              type: "post",
              //dataType: "json",
              data: {
            	  "id":id
              },
              success: function (data) {
                	 alert("删除成功!");
                	 window.location.reload();
              },error: function(XMLHttpRequest, textStatus, errorThrown) {            
	                alert("删除失败!");
	            }  
          });
} 
   }
   
 function getById(obj) {
    $('#EditModal').on('show.bs.modal', function () {
    	var id = $(obj).attr("data");
    	$.ajax({
            url: "${pageContext.request.contextPath}/test/getOneTest.shtml",
            type: "get",
            dataType: "json",
            data: {
          	  "id":id
            },
            success: function (data) {
            	$("#name").val(data.name);
            	$("#age").val(data.age);
            	$("#id").val(data.id);
            }
        }); 
  	})
} 

 function update() {
    var name = $("#name").val();
    var age = $("#age").val();
    var id = $("#id").val();
    if(name==""||name==null){
    	alert("请填写姓名!");
    	return false;
    }
    if(name==""||name==null){
    	alert("请填写年龄!");
    	return false;
    }
	    	$.ajax({
	            url: "${pageContext.request.contextPath}/test/update.shtml",
	            type: "get",
	           //dataType: "json",
	            data: {
	          	  "id":id,
	          	  "name": name,
	          	  "age":age
	            },
	            success: function (data) {
	            	alert("更新成功!");
	            	$('#EditModal').modal('hide');
	            	window.location.reload();
	            },error: function(XMLHttpRequest, textStatus, errorThrown) {            
	                alert("更新失败!");
	            }  
	        }); 
	}
 
 function save() {
	    var name = $("#addname").val();
	    var age = $("#addage").val();
	    var gender = $("input[name='gender']:checked").val();
	    if(name==""||name==null){
	    	alert("请填写姓名!");
	    	return false;
	    }
	    if(name==""||name==null){
	    	alert("请填写年龄!");
	    	return false;
	    }
		    	$.ajax({
		            url: "${pageContext.request.contextPath}/test/save.shtml",
		            type: "get",
		            data: {
		          	  "gender":gender,
		          	  "name": name,
		          	  "age":age
		            },
		            success: function (data) {
		            	alert("添加成功!");
		            	$('#addModal').modal('hide');
		            	window.location.reload();
		            },error: function(XMLHttpRequest, textStatus, errorThrown) {            
		                alert("添加失败!");
		            }  
		        }); 
		}
 
 function add() {
	 $('#addModal').modal('show');
	}
</script>
</head>
<body>
     <button style="margin-top: 60px;margin-left: 10px; type="button" class="btn btn-primary" onclick="javascript:add()">新增一条</button>
    <table class="table table-bordered content">
    <h3 style="text-align: center;">列表信息</h3>
    <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
    </thead>
    <tbody>
      <c:forEach items="${testList}" var="test">
        <tr>
            <td>${test.id}</td>
            <td>${test.name}</td>
            <td>${test.age}</td>
            <td>${test.gender}</td>
            <td>${test.create_time}</td>
            <td><button type="button" onclick="javascript:getById(this)" data="${test.id}" class="btn btn-primary" data-toggle="modal"  data-target="#EditModal">编辑</button>&nbsp;<button type="button" onclick="javascript:del(${test.id});" class="btn btn-danger">删除</button></td>
	 </c:forEach>
        </tr>
    </tbody>
</table>

    <div>
	<nav>
	  <ul class="pagination pagination-sm">
	    ${pageCode }
	  </ul>
	</nav>
 </div>
 
 <!-- edit模态框（Modal） -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<form id="editForm">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					编辑
				</h4>
			</div>
			<div class="modal-body">
				<p><input type="text" value="" class="form-control" name="name" id="name" placeholder="请输入姓名"></p>
				<p><input type="text" value="" class="form-control" id="age" name="age" placeholder="请输入年龄"></p>
			       <input type="hidden" value="" name="id" id="id"/>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
					关闭
				</button>
				<button type="button" onclick="javascript:update()" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
	</form>
</div><!-- /.modal -->

<!-- add模态框（Modal） -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					添加
				</h4>
			</div>
			<div class="modal-body">
				<p><input type="text" value="" class="form-control" name="addname" id="addname" placeholder="请输入姓名"></p>
				<p><input type="text" value="" class="form-control" id="addage" name="addage" placeholder="请输入年龄"></p>
				<p>男 : <input type="radio" checked="checked" value="男" id="gender" name="gender"/>&nbsp;女 : <input id="gender" value="女" type="radio" name="gender"/></p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
					关闭
				</button>
				<button type="button" onclick="javascript:save()" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>